{extend name='public/base' /}

{block name="content"}
<main class="content" style="min-height: 721px;">

    <div id="category-cloud" class="container chip-container">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章栏目
                </div>
                <div class="tag-chips">

                    {volist name='categary_nums' id="v"}

                    <a href="{$v.url}" title="{$v.name}: {$v.articles_count}">
                            <span class="chip center-align waves-effect waves-light chip-default categary_color">
                                {$v.name}
                            <span class="tag-length">{$v.articles_count}</span>
                            </span>
                    </a>
                    {/volist}

                </div>
            </div>
        </div>
    </div>


    <style type="text/css">
        #category-radar {
            width: 100%;
            height: 360px;
        }
    </style>

    <div class="container aos-init aos-animate" data-aos="fade-up">
        <div class="card">
            <div id="category-radar" class="card-content"  style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
            </div>
        </div>
    </div>

    <script type="text/javascript" src="__FJS__/echarts.min.js"></script>
    <script type="text/javascript">
        let radarChart = echarts.init(document.getElementById('category-radar'));
        let categoriesOption = {
            title: {
                text: '文章栏目统计图',
                top: -5,
                x: 'center'
            },
            tooltip: {},
            xAxis: [{
                type: 'category',
                data: eval('{:json_encode($a_name)}')
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                type: 'bar',
                color: ['#ab47bc'],
                barWidth: 18,
                data: eval('{:json_encode($a_num)}'),
                markPoint: {
                    symbolSize: 45,
                    data: [{
                        type: 'max',
                        itemStyle: {
                            color: ['#3ecf8e']
                        },
                        name: '最大值'
                    }, {
                        type: 'min',
                        itemStyle: {
                            color: ['#fa755a']
                        },
                        name: '最小值'
                    }],
                },
                markLine: {
                    itemStyle: {
                        color: ['#ab47bc']
                    },
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };


        radarChart.setOption(categoriesOption);
    </script>

</main>

<script>
    $(function () {
        $(".categary_color").each(function (i) {
            $(this).css({"background": rand_color()});
        })
    });
</script>

{/block}

